<template>
    <div>
        <el-card shadow="hover">
            <div slot="header" class="clearfix">
                <h1 class="title">FunCode在线题库</h1>
                <div>
                    <el-form :inline="true" :model="form" class="demo-form-inline">
                        <el-form-item>
                            <el-select v-model="form.region" placeholder="难度" size="medium">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="form.region" placeholder="标签" size="medium">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="form.user" placeholder="题目" size="medium">
                                <i slot="suffix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="name" width="70">
                </el-table-column>
                <el-table-column prop="date" label="题号" width="180">
                    <template slot-scope="scope">
                        <el-link @click="toProbemItem(scope.row.id)">1+1</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="题目">
                </el-table-column>
                <el-table-column prop="name" label="通过率" width="150">
                </el-table-column>
                <el-table-column prop="name" label="难度" width="150">
                </el-table-column>
            </el-table>
            <div class="pagnation">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
  
<script>
export default {
    name: "problem",
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            form: {}
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        toProbemItem(id) {
            this.$router.push("/problem/" + id)
        }
    },

}
</script>
<style scoped>
.clearfix {
    text-align: center;
}

.title {
    margin-bottom: 20px;
    font-family: "HarmonyOS_Sans_Regular";
}

.pagnation {
    margin-top: 20px;
    text-align: center;
}
</style>